<template>
    <div class="box_pay">
        <div class="title">{{ info.license}}</div>
        <div class="item">
            <span>订单编号：</span>
            <span>{{info.order_no}}</span>
        </div>
        <div class="item">
            <span>小区名称：</span>
            <span>{{info.name}}</span>
        </div>
        <div class="item">
            <span>入场时间：</span>
            <span>{{getDate(info.entry_time)}}</span>
        </div>
        <div class="item">
            <span>出场时间：</span>
            <span>{{getDate(info.exit_time)}}</span>
        </div>
        <div class="item">
            <span>停车时长：</span>
            <span>{{ getDateTime(info.entry_time, info.exit_time) || '-' }}</span>
        </div>
        <div class="item">
            <span>应付金额：</span>
            <span>{{info.price}}</span>
        </div>
        <div class="item">
            <span>优惠金额：</span>
            <span>{{info.price_discount}}</span>
        </div>
        <div class="item">
            <span>实收金额：</span>
            <span>{{info.price-info.price_discount}}</span>
        </div>

        <div class="keySure"
             @click="submitNumber">立即缴费</div>
    </div>
</template>

<script>
import {
    Toast
} from 'vant'
import Vue from 'vue';
Vue.use(Toast);
import { getpay,getsuccessful
} from '../api/api.js'
import { isEmpty } from '../utils/common.js'
export default {
data(){
    return{
        info:{},
        T:'',//定时器的ID
    }
},
mounted(){
    if(JSON.parse(localStorage.getItem('infoPay'))){
  this.info=JSON.parse(localStorage.getItem('infoPay'))
    this.loopOrderState()
    }else{
             this.$router.push('/')
    }
  
    
},
methods:{
       //计算两个时间差
    getDateTime(date1, date2) {
      if (isEmpty(date1) || isEmpty(date2)) {
        return '';
      }
      //计算
      var m = 0;
      let s = Number(date2) - Number(date1);
      m = Math.ceil(s / 60);
      s = s - m * 60;
      var h = Math.floor(m / 60);
      m = m - h * 60;
      return h + "小时" + m + "分" + s + "秒";
    },
    //时间戳转日期
      getDate(date) {
      if (isEmpty(date)) {
        return '';
      }
      var date = new Date(date * 1000); // 参数需要毫秒数，所以这里将秒数乘于 1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    async submitNumber(){
        const data =await getpay({
            community_id:this.info.community_id,
            order_no:this.info.order_no,
            price:this.info.price,
            openid:'',
            method:3,
        })
        console.log(data)
        if(data.status='success'){
            window.location.href=data.data
        }

    },
    loopOrderState(){
    this.T = setInterval(()=>{
     getsuccessful({
         order_no:this.info.order_no,
         community_id:this.info.community_id,
        method:3
     }).then((res)=>{
          if(res.status == 'success'){//10是未支付  20已付款
            Toast.success(res.message)
              clearInterval(this.T)
              this.$router.push('/')
          }
      })
    },1000)
    }
},
beforeDestroy(){
    if(this.T ){
          clearInterval(this.T)
    }
},
}
</script>

<style  lang="less" scoped>
.box_pay {
	padding: 54px;
	box-sizing: border-box;
	.title {
		width: 240px;
		height: 41px;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24px;
		color: #000000;
		text-align: center;
		margin-bottom: 20px;
	}
	.item {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #000000;
		line-height: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30px;
	}
	.keySure {
		margin: auto;
		font-size: 1rem;
		width: 13rem;
		height: 2rem;
		text-align: center;
		line-height: 2rem;
		color: #fff;
		border-radius: 0.45rem;
		background: rgba(251, 125, 82, 1);
		margin-top: 3rem;
	}
}
</style>